function studentoverview() {
    axios.get('/student/overview').then(r => {
        if (r.data.code === 0) {
            //解构
            const { total, avgSalary, avgAge, proportion } = r.data.data;
            document.querySelector('.total').innerText = total;
            document.querySelector('.avgSalary').innerText = avgSalary;
            document.querySelector('.avgAge').innerText = avgAge;
            document.querySelector('.proportion').innerText = proportion;
        }
    })
}

function getStudentList() {

    axios.get('/student/list').then(r => {
        const list = r.data.data;
        // 折线图数据
        Salary(list);

        //饼图
        pie(list)
    })



}

// 折线图数据
function Salary(list) {
    //获取数据
    axios.get('/student/list').then(r => {
        // 获取期望薪资
        const salarys = list.map(v => v.salary);
        // 获取实际薪资
        const truesalarys = list.map(v => v.truesalary);
        // 姓名
        const names = list.map(v => v.name);
        // 基于准备好的dom，初始化echarts实例
        const myChart = echarts.init(document.querySelector('.line'));
        // 指定图表的配置项和数据
        option = {
            title: {
                text: '薪资 Salary'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {},
            toolbox: {
                show: false,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: { readOnly: false },
                    magicType: { type: ['line', 'bar'] },
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                // data: ['龙', '组', '是', '个', '大', '沟', '巴']
                data: names
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value}'
                }
            },
            dataZoom: [
                {
                    type: 'inside',
                    start: 0,
                    end: 20
                },
                {
                    start: 0,
                    end: 20
                }
            ],
            series: [
                {
                    name: '期望薪资',
                    type: 'line',
                    // 实心
                    symbol: 'circle',
                    // 平滑线
                    smooth: true,
                    data: salarys,

                },
                {
                    name: '实际薪资',
                    type: 'line',
                    // 实心
                    symbol: 'circle',
                    smooth: true,
                    data: truesalarys,

                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    })

}


//饼图
function pie(list) {
    const newList = [];
    list.forEach(v => {
        const index = newList.findIndex(s => s.name === v.province);
        if (index === -1) {
            newList.push({ value: 1, name: v.province })
        } else {
            newList[index].value++;
        }
    })

    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.querySelector('.pie'));

    // 指定图表的配置项和数据
    option = {
        legend: {
            top: 'bottom'
        },
        title: {
            text: '籍贯'
        },
        series: [
            {
                name: 'Nightingale Chart',
                type: 'pie',
                radius: [40, 150],
                center: ['50%', '40%'],
                roseType: 'area',
                itemStyle: {
                    borderRadius: 8
                },
                data: newList
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

}

// 柱形图
// 获取组的成绩
function getScore(batch) {
    axios.get('/score/batch', { params: { batch } }).then(v => {
        if (v.data.code === 0) {
            const { avgScore, group, gt60, gt80, lt60 } = v.data.data;
            console.log(v.data.data);

            // 基于准备好的dom，初始化echarts实例
            const myChart = echarts.init(document.querySelector('.barChart'));

            // 指定图表的配置项和数据
            const option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                grid: {
                    top: 30, //顶部的距离
                    bottom: 20,//底部的距离
                    left: 60,
                    right: 60
                },
                legend: {
                    data: ['平均分', '低于60分的人数', '60-80分的人数', '高于80分的人数']
                },
                xAxis: [
                    {
                        type: 'category',
                        data: group,
                        axisPointer: {
                            type: 'shadow'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        min: 0,
                        max: 100,
                        interval: 10,
                        axisLabel: {
                            formatter: '{value} 分'
                        }
                    },
                    {
                        type: 'value',
                        min: 0,
                        max: 10,
                        interval: 1,
                        axisLabel: {
                            formatter: '{value} 人'
                        }
                    }
                ],
                series: [
                    {
                        name: '平均分',
                        type: 'bar',
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + ' ml';
                            }
                        },
                        data: avgScore
                    },
                    {
                        name: '低于60分的人数',
                        type: 'bar',
                        yAxisIndex: 1,
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + ' ml';
                            }
                        },
                        data: lt60
                    }, {
                        name: '60-80分的人数',
                        type: 'bar',
                        yAxisIndex: 1,
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + ' ml';
                            }
                        },
                        data: gt60
                    }, {
                        name: '高于80分的人数',
                        type: 'bar',
                        yAxisIndex: 1,
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + ' ml';
                            }
                        },
                        data: gt80
                    },
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    })
}

studentoverview();

//人数
getStudentList();

getScore(1);


//绑定点击事件
const toggleBatchBtn = document.querySelector('#toggleBatchBtn');
const toggleul = document.querySelector('#batch');
toggleBatchBtn.addEventListener('click', function (e) {
    toggleul.classList.toggle('show');
})

toggleul.addEventListener('click', function (e) {
    if (e.target.nodeName === 'A') {
        //获取到a的下标
        const index = e.target.dataset.index;
        getScore(index);
    }
})